<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link type="text/css" rel="stylesheet" href="css/layui.css">
		<script type="text/javascript" src="layui.js"></script>
	</head>
	<body>
		<div class="layui-container">
			常规布局（以中型屏幕桌面为例）：
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md2 layui-bg-blue">
				你的内容 2/12   
					<div class="layui-row grid-demo grid-demo-bg1">
						<div class="layui-col-md12 layui-bg-green"> 内部列 </div>
						<div class="layui-col-md9 layui-bg-red"> 内部列 </div>
						<div class="layui-col-md3 layui-bg-gray"> 内部列 </div>
					</div>
				</div>       
				<div class="layui-col-md6 layui-bg-gray layui-col-md-offset4">
				你的内容 6/12       
				</div>     
		     </div> 
		</div> 
		<div class="layui-container">
			常规布局（以中型屏幕桌面为例）：
			<div class="layui-row layui-col-space10">
				<div class="layui-col-md4 layui-bg-blue">
				   <div class="bg">1/3</div>
				</div>       
				<div class="layui-col-md4 layui-bg-gray">   
				<div class="bg">1/3</div>
				</div>  
				 <div class="layui-col-md4 layui-bg-blue">
				   <div class="bg">1/3</div>
				 </div> 
		     </div> 
		</div> 
		<br />
		//手机端xs 平板sm 桌面md
		<div class="layui-row">
			<div class="layui-col-xs6 layui-bg-blue layui-col-sm5
			layui-col-md4">
			xs6 sm5 md4
			</div>
			<div class="layui-col-xs6 layui-bg-red layui-col-sm5
			layui-col-md4">
			xs6 sm5 md4
			</div>
			<div class="layui-col-xs6 layui-bg-gray layui-col-sm5
			layui-col-md4">
			xs6 sm5 md4
			</div>
		</div>
		<script>
			layui.use(['layer','element'],function(){
				var layer = layui.layer,
				element = layui.element;
			});
		</script>
	</body>
</html>
